<template>
    <div style=" display: flex; flex-direction: column;">
        <el-row>
            <el-button @click="changeStatus(null)">全部订单</el-button>
            <el-badge :value="badge2" :hidden="badge2 === 0" style="margin-left: 20px;">
                <el-button @click="changeStatus(2)">待接单</el-button>
            </el-badge>
            <el-badge :value="badge3" :hidden="badge3 === 0" class="item" style="margin-left: 20px;">
                <el-button @click="changeStatus(3)">待派送</el-button>
            </el-badge>
            <el-badge :value="badge4" :hidden="badge4 === 0" class="item" style="margin-left: 20px;">
                <el-button @click="changeStatus(4)">派送中</el-button>
            </el-badge>
            <el-button @click="changeStatus(5)" style="margin-left: 20px;">已完成</el-button>
            <el-button @click="changeStatus(6)">已取消</el-button>
            <el-button @click="changeStatus(7)">已退款</el-button>

        </el-row>
        <el-form :inline="true" :model="queryForm" style="margin-top: 20px;margin-left: 20px;">
            <el-form-item label="订单号" style="width: 200px;">
                <el-input v-model="queryForm.number" placeholder="请输入订单号" clearable />
            </el-form-item>
            <el-form-item label="手机号" style="width: 200px;">
                <el-input v-model="queryForm.phone" placeholder="请输入手机号" clearable />
            </el-form-item>

            <el-form-item label="下单时间">
                <el-date-picker style="width: 130px;" v-model="queryForm.beginTime" type="date" placeholder="开始时间"
                    value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="到" style="margin-left: -20px">
                <el-date-picker style="width: 130px;" v-model="queryForm.endTime" type="date" placeholder="结束时间"
                    value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="number" label="订单号" width="150" align="center" />
            <el-table-column v-if="status === null" label="订单状态" width="80" align="center">
                <template v-slot="{ row }">
                    <span v-if="row.status === 1">待付款</span>
                    <span v-else-if="row.status === 2">待接单</span>
                    <span v-else-if="row.status === 3">已接单</span>
                    <span v-else-if="row.status === 4">派送中</span>
                    <span v-else-if="row.status === 5">已完成</span>
                    <span v-else-if="row.status === 6">已取消</span>
                    <span v-else-if="row.status === 7">已退款</span>
                </template>
            </el-table-column>
            <el-table-column v-if="status !== null && status !== 5 && status !== 6 && status !== 7" label="订单菜品"
                width="200" align="center">
                <template v-slot="{ row }">
                    <div v-for="item in row.orderDetailList" :key="item.id">
                        <span>{{ item.name }} {{ item.dishFlavor }}*{{ item.number }};</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column v-if="status === null || status === 5 || status === 6 || status === 7" prop="consignee"
                label="收货人" width="200" align="center" />
            <el-table-column v-if="status === null || status === 5 || status === 6 || status === 7" prop="phone"
                label="手机号" width="150" align="center" />
            <el-table-column prop="address" label="地址" width="100" align="center" />、
            <el-table-column v-if="status === null || status === 6 || status === 7" prop="orderTime" label="下单时间"
                width="120" align="center" />
            <el-table-column v-if="status === 6 || status === 7" prop="cancelTime" label="取消时间" width="120"
                align="center" />
            <el-table-column v-if="status === 6 || status === 7" prop="cancelReason" label="取消原因" width="120"
                align="center" />

            <el-table-column v-if="status !== null && status !== 5 && status !== 6 && status !== 7"
                prop="estimatedDeliveryTime" label="预计送达时间" width="120" align="center" />
            <el-table-column v-if="status === 5" prop="deliveryTime" label="送达时间" width="120" align="center" />
            <el-table-column v-if="status === null || status === 2 || status === 5" label="实收金额" width="120"
                align="center">
                <template v-slot="{ row }">
                    ¥{{ row.amount }}
                </template>
            </el-table-column>
            <el-table-column v-if="status !== null && status !== 6 && status !== 7" prop="remark" label="备注" width="120"
                align="center" />
            <el-table-column fixed="right" label="操作" width="150" align="center">
                <template v-slot="{ row }">
                    <el-button v-if="status === 2" link type="primary" size="small" @click="accept(row)">接单</el-button>
                    <el-button v-if="status === 2" link type="primary" size="small" @click="cancel(row)">拒单</el-button>
                    <el-button v-if="status === 3" link type="primary" size="small" @click="accept(row)">派送</el-button>
                    <el-button v-if="status === 3" link type="primary" size="small" @click="cancel(row)">取消</el-button>
                    <el-button v-if="status === 4" link type="primary" size="small" @click="accept(row)">完成</el-button>
                    <el-button v-if="status === 4 || status == 5" link type="primary" size="small"
                        @click="cancel(row)">取消</el-button>
                    <el-button link type="primary" v-if="status == 6" size="small" @click="refund(row)">退款</el-button>
                    <el-button link type="primary" size="small" @click="detail(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="display: flex; margin-top: 20px; margin-left: 240px;">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[6, 8, 10]"
                :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <el-dialog v-model="dialogVisible" title="订单信息" width="500" center>
            <el-card>
                <el-row>订单号:{{ rowData.number }}
                    <el-tag type="info" effect="dark" style="margin-left: 10px;">
                        {{ isStatus(rowData.status) }}
                    </el-tag>
                </el-row>
                <el-row>下单时间:{{ rowData.orderTime }} </el-row>
                ---------------------------------------------------------
                <el-row>收货人:{{ rowData.consignee }}</el-row>
                <el-row>手机号:{{ rowData.phone }}</el-row>
                <el-row>地址:{{ rowData.address }}</el-row>
                <el-row v-if="rowData.status !== 6">备注:{{ rowData.remark }}</el-row>
                <el-row v-if="rowData.status === 6">取消原因:{{ rowData.cancelReason }}</el-row>
                ---------------------------------------------------------
                <el-row>
                    菜品:
                </el-row>

                <div v-for="item in rowData.orderDetailList" :key="item.id">
                    <div>{{ item.name }} {{ item.dishFlavor }}*{{ item.number }} ¥{{ item.amount }};</div>
                </div>

                <el-row>菜品小计:¥{{ rowData.amount - 1 - 3 }}</el-row>
                ------------------------------------------------------
                <el-row>费用:</el-row>
                <el-row>菜品小计:{{ rowData.amount - 1 - 3 }} 配送费:¥3</el-row>
                <el-row>打包费:¥1 合计:¥{{ rowData.amount }} </el-row>
                <el-row v-if="payMethod">支付渠道:{{ payMethod }} 支付时间:{{ rowData.checkoutTime }} </el-row>
            </el-card>
        </el-dialog>
        <el-dialog v-model="dialogCancel" title="取消原因" width="500" center>
            <el-card>
                取消原因:<el-input v-model="cancelReason" />
            </el-card>
            <el-button type="primary" @click="okCancel(cancelData)">确定</el-button>
            <el-button type="primary" @click="closeDialog()">取消</el-button>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { reactive } from 'vue'
const status = ref(null)
const queryForm = reactive({
    number: '',
    beginTime: null,
    endTime: null,
    phone: '',
})

//分页
const total = ref(Number)
const currentPage = ref(1)
const pageSize = ref(6)
const small = ref(true)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pageSize.value = val
    onSubmit();
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPage.value = val
    onSubmit();
}
const badge2 = ref(0);
const badge3 = ref(0);
const badge4 = ref(0);
const tableData = ref([])
import { getList, getAllOrder } from '@/apis/order.js'
async function getEmployeeList() {
    const res = await getList(currentPage.value, pageSize.value)
    console.log(res)
    tableData.value = res.data.data.records
    console.log(res.data.data.total)
    total.value = res.data.data.total
}
getEmployeeList()

//获取徽章数
async function getBadge() {
    const res = await getAllOrder()
    const data = res.data.data
    badge2.value = 0;
    badge3.value = 0;
    badge4.value = 0;
    console.log(data)
    data.forEach((item: any) => {
        console.log(item.status)
        if (item.status === 2) {
            badge2.value++
        }
        if (item.status === 3) {
            badge3.value++
        }
        if (item.status === 4) {
            badge4.value++
        }
    })
}
getBadge()
//条件查询
const onSubmit = async () => {
    console.log('submit!')
    const res = await getList(currentPage.value, pageSize.value, queryForm.number, queryForm.phone
        , queryForm.beginTime, queryForm.endTime, status.value)
    console.log(res.data.data.records)
    tableData.value = res.data.data.records
    total.value = res.data.data.total
}
function changeStatus(val) {
    status.value = val
    onSubmit();
}
const rowData = ref(null)
//弹窗
const dialogVisible = ref(false)
//判断订单状态
function isStatus(val) {
    if (val === 1) {
        return '待付款'
    }
    if (val === 2) {
        return '待接单'
    }
    if (val === 3) {
        return '待派送'
    }
    if (val === 4) {
        return '派送中'
    }
    if (val === 5) {
        return '已完成'
    }
    if (val === 6) {
        return '已取消'
    }
    if (val === 7) {
        return '已退款'
    }
}
const payMethod = ref(null)
//详情
function detail(row: any) {
    dialogVisible.value = true
    rowData.value = row
    if (rowData.value.payMethod) {
        rowData.value.payMethod === 1 ? payMethod.value = '支付宝' : payMethod.value = '微信'
    }

}
import { updateStausById } from '@/apis/order'
import { ElMessage } from 'element-plus'
//接单 派送 完成
async function accept(row: any) {
    const res = await updateStausById(row.id)
    console.log(res)
    if (res.data.code === 1) {
        ElMessage.success('操作成功')
        onSubmit()
        getBadge()
    }
}
const dialogCancel = ref(false)
const cancelReason = ref(null)
const cancelData = ref(null)
//拒单 取消
function cancel(row: any) {
    dialogCancel.value = true
    cancelData.value = row
}
//取消弹窗确认
async function okCancel(row: any) {
    const res = await updateStausById(row.id, cancelReason.value)
    console.log(res);
    if (res.data.code === 1) {
        ElMessage.success('操作成功')
        onSubmit()
        dialogCancel.value = false
        cancelReason.value = null
        getBadge()
    }
}
//退款
async function refund(row: any) {
    const res = await updateStausById(row.id)
    if (res.data.code === 1) {
        ElMessage.success('操作成功')
        onSubmit()
        getBadge()
    }
}
//取消弹窗取消
function closeDialog() {
    dialogCancel.value = false
    cancelReason.value = null
}
</script>